<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- React核心包 最先引入 提供一个对象React -->
  <script src="../../React/react.development.js"></script>
  <!-- React操作DOM的包 提供一个一个对象ReactDOM -->
  <script src="../../React/react-dom.development.js"></script>
  <!-- 引入babel的包 用来解析jsx语法为JS语法 -->
  <script src="../../React/babel.min.js"></script>
  <title>Document</title>
  <style>
    .outer {
      width: 400px;
      height: 300px;
      background-color: aqua;
    }
  </style>
</head>

<body>
  <!-- React操作的容器 -->
  <div id="app"></div>
  <script type="text/babel">
    // 如果需要babel对当前的script的内部进行jsx编译,则需要设置script的type属性
    // 使用jsx方式创建一个虚拟DOM
    // 案例1
    // const vDom = (<div className='outer'>hello</div>)
    // 在jsx语法中class是关键字 最好用className书写
    // const vDom = (<div className='outer'>
    //   <p>hello</p>
    //   <p>world</p>
    // </div>)
    // 什么是虚拟DOM
    // 真实dom 会一直往上找 一直找到顶级 对象上才结束
    // const app = document.getElementById('app')
    // console.dir(app, 'app');
    // 虚拟Dom:
    //  本质就是object类型的对象(一般对象)
    //  虚拟DOM比较'轻' 真实Dom比较重,虚拟DOM是react内部再用的,无需真实Dom身上那么多的属性
    // 虚拟对象也是会被react转为真实DOM,呈现在页面上
    //创建容器并渲染虚拟DOM 固定写法
    // ReactDOM.createRoot(document.getElementById('app')).render(vDom)

  </script>
</body>

</html>